<template>
    <iframe :src="src" ref="myIframe" frameborder="no" width="100%" scrolling="no" allowtransparency="true"/>
</template>
<script lang="ts">
  import {Component, Prop, Ref, Vue} from 'vue-property-decorator';

  @Component
  export default class IframeComponent extends Vue {
    @Prop({default: ''}) private url!: string;

    get src() {
      return process.env.VUE_APP_BASE_API + this.url;
    }

    private timer: any;
    @Ref('myIframe') private myIframe: any;

    changeFrameHeight() {
      if (this.myIframe) {
        if (this.myIframe.contentDocument && this.myIframe.contentDocument.body) {
          this.myIframe.height = this.myIframe.contentDocument.body.clientHeight;
          //console.log(this.myIframe.contentDocument.body.clientWidth)
        }
      }
    }

    mounted() {
      this.timer = window.setInterval(() => this.changeFrameHeight(), 200);
    }

    beforeDestroy() {
      clearInterval(this.timer);
    }
  }
</script>

<style scoped lang="scss">

</style>

